* {
    box-sizing: border-box;
}
html,
body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: $font-md;
    @include font_color('text-regular');
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: row,
        $justify: center,
        $align: center
    );
    #app {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: column,
            $justify: center,
            $align: center
        );
    }

    /* fade */

    /* fade */
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.28s;
    }
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }

    /* fade-transform */
    .fade-transform-leave-active,
    .fade-transform-enter-active {
        transition: all 0.5s;
    }
    .fade-transform-enter {
        opacity: 0;
        transform: translateX(-30px);
    }
    .fade-transform-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }
}
// 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
::-webkit-scrollbar {
    width: 5px;
    height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
    border-radius: 5px;
}
// 滑块
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    @include background_color('info-light1');
}
// 轨道
::-webkit-scrollbar-track {
    border-radius: 5px;
    @include background_color('color-t');
}
@media screen and (max-width: 1680px) {
    html,
    body {
        font-size: $font-sm;
    }
}
